<template>
	<view class="user" :class="[isDark?'dark':'', AppStyle]" :style="{'background-color':isDark?'#1c1c1c':'#f6f6f6','min-height':isDark?'100vh':'auto'}">
		<view class="header" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar" :class="isDark?'dark':'bg-white'" :style="{'height': CustomBar + 'px','padding-top':StatusBar + 'px','background-color':isDark?'#1c1c1c':'#ffffff'}">
				<view class="action" @tap="back">
					<text class="cuIcon-back"></text>
				</view>
				<view class="content text-bold" :style="[{top:StatusBar + 'px'}]">
					{{$t('user.clothes.applystyles')}}
				</view>
				<view class="action">
					<button class="cu-btn round bg-blue" @tap="save()">{{$t('global.save')}}</button>
				</view>
			</view>
		</view>
		<view :style="[{padding:NavBar + 'px 10px 0px 10px'}]"></view>
		<view class="data-box">
			<view class="style-title">
				{{$t('user.clothes.minitheme')}}
			</view>
			<view class="style-concent grid col-4 style-simple">
				<view class="style-box" @tap="setAppStyle('simple-blue')">
					<view class="style-i" style="color: #3cc9a4;">
						(ง •̀_•́)ง
					</view>
					<view class="style-text">
						<text class="cuIcon-check" v-if="AppStyle=='simple-blue'"></text>{{$t('user.clothes.defaultblue')}}
					</view>
				</view>
				<view class="style-box" @tap="setAppStyle('simple-pink')">
					<view class="style-i" style="color: #fa7298;">
						(๑• . •๑)
					</view>
					<view class="style-text">
						<text class="cuIcon-check" v-if="AppStyle=='simple-pink'"></text>{{$t('user.clothes.minipink')}}
					</view>
				</view>
				<view class="style-box" @tap="setAppStyle('simple-orange')">
					<view class="style-i" style="color: #f47c35;">
						(ಡωಡ)
					</view>
					<view class="style-text">
						<text class="cuIcon-check" v-if="AppStyle=='simple-orange'"></text>{{$t('user.clothes.simpleorange')}}
					</view>
				</view>
				<view class="style-box" @tap="setAppStyle('simple-green')">
					<view class="style-i" style="color: #8ebe58;">
						( ｰ̀εｰ́ )
					</view>
					<view class="style-text">
						<text class="cuIcon-check" v-if="AppStyle=='simple-green'"></text>{{$t('user.clothes.simplegreen')}}
					</view>
				</view>
			</view>
		</view>
		<view class="data-box">
			<view class="style-title">
				{{$t('user.clothes.signtheme')}}
			</view>
			<view class="style-concent grid col-4">
				<view class="style-box" @tap="setAppStyle('full-blue')">
					<view class="style-i" style="background: #3cc9a4;">
						
					</view>
					<view class="style-text">
						<text class="cuIcon-check" v-if="AppStyle=='full-blue'"></text>{{$t('user.clothes.signblue')}}
					</view>
				</view>
				<view class="style-box" @tap="setAppStyle('full-pink')">
					<view class="style-i" style="background: #fa7298;">
						
					</view>
					<view class="style-text">
						<text class="cuIcon-check" v-if="AppStyle=='full-pink'"></text>{{$t('user.clothes.signpowder')}}
					</view>
				</view>
				<view class="style-box" @tap="setAppStyle('full-orange')">
					<view class="style-i" style="background: #f47c35;">
						
					</view>
					<view class="style-text">
						<text class="cuIcon-check" v-if="AppStyle=='full-orange'"></text>{{$t('user.clothes.signorange')}}
					</view>
				</view>
				<view class="style-box" @tap="setAppStyle('full-green')">
					<view class="style-i" style="background: #8ebe58;">
						
					</view>
					<view class="style-text">
						<text class="cuIcon-check" v-if="AppStyle=='full-green'"></text>{{$t('user.clothes.signgreen')}}
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import waves from '@/components/xxley-waves/waves.vue';
	import { localStorage } from '../../js_sdk/mp-storage/mp-storage/index.js'
	import darkModeMixin from '@/utils/darkModeMixin.js'
	export default {
		mixins: [darkModeMixin],
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				NavBar:this.StatusBar +  this.CustomBar,
				AppStyle:this.$store.state.AppStyle,
				styleIndex:""
			}
		},
		onShow(){
			var that = this;
			if(localStorage.getItem('appStyle')){
				that.appStyle = localStorage.getItem('appStyle');
				// that.$store.state.AppStyle = that.appStyle;
				that.$store.commit('setStyle', that.appStyle);
			}
			// #ifdef APP-PLUS
			//plus.navigator.setStatusBarStyle("dark")
			// #endif
		},
		onLoad(res) {
			var that = this;
			// #ifdef APP-PLUS || MP
			that.NavBar = that.CustomBar;
			// #endif
			if(res.text){
				that.text = res.text;
			}
			that.styleIndex = that.$API.GetStyleIndex();
			
		},
		methods:{
			back(){
				uni.navigateBack({
					delta: 1
				});
			},
			setAppStyle(style){
				var that = this;
				that.AppStyle = style;
				// that.$store.state.AppStyle = style;
				
			},
			save(){
				var that = this;
				var style = that.AppStyle;
				localStorage.setItem('appStyle',style);
				that.$store.commit('setStyle', style);
				console.log(that.$store.state.AppStyle);
				var curStyle = "blue";
				if(style.indexOf("blue")!=-1){
					curStyle = "blue";
				}
				if(style.indexOf("pink")!=-1){
					curStyle = "pink";
				}
				if(style.indexOf("orange")!=-1){
					curStyle = "orange";
				}
				if(style.indexOf("green")!=-1){
					curStyle = "green";
				}
				var styleIndex = that.styleIndex;
				uni.redirectTo({
					url: '/pages/home/'+styleIndex
				})
			}
		}
	}
</script>